<template>
  <div class="warp">
    <div class="top">
      <div class="hosname">{{ hospitalBaseMaps.hosname }}</div>
      <div class="line">|</div>
      <div class="department">{{ hospitalBaseMaps.bigname }}</div>
      <div class="dot">.</div>
      <div class="hospitalParmt">{{ hospitalBaseMaps.depname }}</div>
    </div>
    <div class="center">
      <div class="contend">
        <h1 class="time">{{ hospitalBaseMaps.workDateString }}</h1>
        <div class="contend_bottom">
          <div class="item" v-for="(item, index) in hospitalArr" :key="index" @click="changeTime(item)" :class="{ cur:item.workDate==FirstDay.workDate}">
            <div
              class="conterd-items"
              :class="{
                active: item.status == -1 || item.reservedNumber == -1,
               
              }"
            >
              <div class="item-top">
                <p>{{ item.workDate }}</p>
                <p class="date">{{ item.dayOfWeek }}</p>
              </div>
              <div class="item-bottom">
                <div v-if="item.status == -1">停止挂号</div>
                <div v-if="item.status == 0">
                  {{
                    item.reservedNumber == -1
                      ? "约满了"
                      : `有号`
                  }}
                </div>
                <div v-if="item.status == 1">即将放号</div>
              </div>
            </div>
          </div>
        </div>
        <div class="pages">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            background
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="will" v-if="FirstDay.status==1">
        <div class="time">2023-10-21-08-30放号</div>
      </div>
      <!-- 号原 -->
      <div class="origin" v-else>
        <div class="moring">
          <div class="tip">
            <svg
              t="1697812666471"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4098"
              width="32"
              height="32"
            >
              <path
                d="M512 827.076923a315.076923 315.076923 0 1 1 315.076923-315.076923 315.076923 315.076923 0 0 1-315.076923 315.076923zM472.615385 39.384615a39.384615 39.384615 0 0 1 78.76923 0v78.769231a39.384615 39.384615 0 0 1-78.76923 0z m0 866.461539a39.384615 39.384615 0 0 1 78.76923 0v78.769231a39.384615 39.384615 0 0 1-78.76923 0zM818.317785 149.976615a39.384615 39.384615 0 1 1 56.713846 54.697354l-0.945231 0.945231-55.7056 55.7056a39.384615 39.384615 0 0 1-55.894646-55.642585zM205.682215 762.486154a39.384615 39.384615 0 0 1 56.713847 54.697354l-0.945231 0.94523-55.7056 55.7056a39.384615 39.384615 0 0 1-55.7056-55.7056z m0-612.698585a39.384615 39.384615 0 1 0-56.713846 54.697354l0.945231 0.945231 55.7056 55.7056a39.384615 39.384615 0 0 0 55.7056-55.7056zM818.317785 762.486154a39.384615 39.384615 0 0 0-56.713847 54.697354l0.945231 0.94523 55.7056 55.7056a39.384615 39.384615 0 0 0 55.7056-55.7056z m166.2976-289.870769a39.384615 39.384615 0 0 1 0 78.76923h-78.769231a39.384615 39.384615 0 0 1 0-78.76923z m-866.461539 0a39.384615 39.384615 0 0 1 0 78.76923H39.384615a39.384615 39.384615 0 0 1 0-78.76923z"
                fill="#DFA705"
                p-id="4099"
              ></path>
            </svg>
            <span>上午号源</span>
          </div>
          <div class="contend" v-if="!(FirstDay.status==-1)">
            <div class="dockter" v-for="item in moringDocArr" :key="item.id">
              <div class="left">
                <div class="name">{{item.title}} | {{item.docname}}</div>
                <p>{{ item.skill }}</p>
              </div>
              <div class="right">
                <div class="price">￥{{ item.amount }}</div>
                <el-button type="primary" size="large" @click="goInfos(item)">剩余{{ item.availableNumber }}</el-button>
              </div>
            </div>
          </div>
        </div>
        <div class="after">
          <div class="tip">
            <svg
              t="1697813896282"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="9148"
              width="32"
              height="32"
            >
              <path
                d="M253.125539 756.458152H770.875485v57.552673H253.125539zM396.940704 842.747252H627.060319v57.554719H396.940704zM943.454707 555.14455v-57.554719h-102.021378c-8.76153-51.345309-29.436367-99.547028-59.210425-141.371515l83.200768-83.143463-40.67327-40.700899-79.435008 79.408402c-54.605556-55.419083-126.681984-92.69396-204.544174-100.222409V123.697006h-57.541416v87.834289c-75.446169 7.218387-143.379238 42.385258-194.642683 95.811968l-74.95396-74.970333L172.958868 273.07383l79.421705 79.407379c-28.510277 42.218459-48.05948 91.598001-56.037159 145.107599H80.54427v57.554718h111.684438c0.477883 39.63257 8.271367 78.142575 22.835033 115.052133H109.30935v57.497414h805.382324v-57.497414h-91.401527c14.549338-36.908534 22.360219-75.418539 22.863684-115.052133h97.300876v0.001024zM277.562042 670.196682c-18.566831-37.668849-28.032394-77.693345-28.032394-119.066554 0-153.732006 120.191166-283.616932 262.476492-283.616933 147.468362 0 276.844706 132.525051 276.844705 283.616933 0 41.374234-9.493193 81.398729-28.032394 119.066554H277.562042z"
                fill="#f4ea2a"
                p-id="9149"
              ></path>
            </svg>
            <span>下午号源</span>
          </div>
          <div class="contend" v-if="!(FirstDay.status==-1)">
            <div class="dockter" v-for="item in afterDocArr" :key="item.id">
              <div class="left">
                <div class="name">{{item.title}} | {{item.docname}}</div>
                <p>{{ item.skill }}</p>
              </div>
              <div class="right">
                <div class="price">￥{{ item.amount }}</div>
                <el-button @click="goInfos(item)" type="primary" size="large">剩余{{ item.availableNumber }}</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from "vue";
//引入接口
import { reqHospitalRegister,reqHospitalDoctor } from "@/api/hospital";
//引入接口类型
import type {
  hospitalWorkResponesData,
  hospitalBaseMap,
  hospitalBookingScheduleList,
  hospitalDoctorList,
  hospitalDoctor
} from "@/api/hospital/type";
//引入路由
import { useRoute,useRouter } from "vue-router";
//创建路由对象
let $route = useRoute();
let $router = useRouter();
//分页器当前页数
let pageNo = ref(1);
//一页展示多少条数据
let pageSize = ref(6);
//总页数
let total = ref(0);
//当前医院信息
let hospitalBaseMaps = reactive<hospitalBaseMap>({
  workDateString: "",
  releaseTime: "",
  bigname: "",
  stopTime: "",
  depname: "",
  hosname: "",
});
//获取第一天排班的数据
let FirstDay = ref<any>({})
//医院挂号信息
let hospitalArr = ref<hospitalBookingScheduleList[]>();
//存储医院医生数据
let HosDoctor = ref<hospitalDoctor[]>([])
//挂载时获取医院数据
onMounted(() => {
  HasHospitalRegister();


});
//获取医院挂号信息方法的回调
const HasHospitalRegister = async () => {
  //整理参数
  const { hoscode, depcode } = $route.query;

  
  //发送请求
  let result: hospitalWorkResponesData = await reqHospitalRegister(
    pageNo.value,
    pageSize.value,
    hoscode as string,
    depcode as string
  );
  if (result.code == 200) {
    //收集数据
    total.value = result.data.total;
    Object.assign(hospitalBaseMaps, result.data.baseMap);
    hospitalArr.value = result.data.bookingScheduleList;
   FirstDay.value = hospitalArr.value[0];

      //获取医院排班
  HasDoctorRegister();
  }
};
//当前页数发生改变时的回调
const handleCurrentChange = (val: number) => {
  pageNo.value = val;
  HasHospitalRegister();
};
//获取医院排班的数据
const HasDoctorRegister = async ()=>{
    //整理参数
    const { hoscode, depcode } = $route.query;
    //发送请求
    let result:hospitalDoctorList = await reqHospitalDoctor((hoscode as string),(depcode as string),FirstDay.value.workDate);
    if(result.code == 200) {
      //存储数据
      HosDoctor.value=result.data;

      
    }
    
}
//修改时间的回调
const changeTime = (item:any)=>{
 //存储数据
 FirstDay.value = item;

 
  //发送请求
  HasDoctorRegister();
}
//挂号按钮的回调
const goInfos = (item:any)=>{
  
  // 路由跳转
  $router.push({
    path:'registration_step2',
    query:{
      id:item.id
    }
  })

  
}
//计算上午的医生
let moringDocArr:any = computed(()=>{
  return HosDoctor.value.filter(item=>item.workTime==0)
})
//计算下午的医生
let afterDocArr:any = computed(()=>{
  return HosDoctor.value.filter(item=>item.workTime==1)
})
</script>

<style scoped lang="scss">
.warp {
  .top {
    margin-top: 30px;
    display: flex;
    .line {
      margin: 0px 5px;
    }
    .dot {
      margin: 0px 5px;
    }
  }
  .center {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .contend {
      width: 100%;
      .time {
        text-align: center;
        font-size: 20px;
        font-weight: 900;
      }
      .contend_bottom {
        display: flex;
        width: 100%;
        .item {
          margin: 30px 10px;
          flex: 1;
          border: 1px solid skyblue;
          transition: all .4s;
          &.cur {
              transform: scale(1.1);
            }
          .conterd-items {
            &.active {
              border: 1px solid #ccc;
              .item-top {
                background-color: #ccc;
              }
            }
         
            .item-top {
              background-color: #e8f2ff;
              display: flex;
              height: 40px;
              align-items: center;
              justify-content: center;
              line-height: 40px;
              .date {
                margin-left: 5px;
              }
            }
            .item-bottom {
              height: 60px;
              line-height: 60px;
              text-align: center;
            }
          }
        }
      }
    }
    .pages {
      display: flex;
      justify-content: center;
    }
  }
  .bottom {
    margin-top: 30px;
    .will {
      .time {
        text-align: center;
        font-size: 30px;
      }
    }
    .origin {
      .moring {
        .tip {
          display: flex;
          align-items: center;
          span {
            margin-left: 5px;
            font-size: 18px;
            font-weight: 900;
          }
        }
        .contend {
          .dockter {
            display: flex;
            height: 80px;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #7f7f7f;
            .left {
              .name {
                color: skyblue;
                font-size: 20px;
                font-weight: 900;
              }
              p {
                margin-top: 10px;
              }
            }
            .right {
              display: flex;
              align-items: center;
              .price {
                margin-right: 10px;
                font-weight: 900;
              }
            }
          }
        }
      }
      .after {
        margin: 10px 0;
        .tip {
          display: flex;
          align-items: center;
          span {
            margin-left: 5px;
            font-size: 18px;
            font-weight: 900;
          }
        }
        .contend {
          .dockter {
            display: flex;
            height: 80px;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #7f7f7f;
            .left {
              .name {
                color: skyblue;
                font-size: 20px;
                font-weight: 900;
              }
              p {
                margin-top: 10px;
              }
            }
            .right {
              display: flex;
              align-items: center;
              .price {
                margin-right: 10px;
                font-weight: 900;
              }
            }
          }
        }
      }
    }
  }
}
</style>
